{% extends 'base.html' %}

{% block title %}
    {{ block.super }} | 台网信息
{% endblock %}

{% block content %}
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h2">台网信息</h1>
        <div class="btn-toolbar mb-2 mb-md-0">
            <div class="btn-group mr-2">
                <button class="btn btn-sm btn-outline-secondary">Share</button>
                <button class="btn btn-sm btn-outline-secondary">Export</button>
            </div>
            <button class="btn btn-sm btn-outline-secondary dropdown-toggle">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                     stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                     class="feather feather-calendar">
                    <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                    <line x1="16" y1="2" x2="16" y2="6"></line>
                    <line x1="8" y1="2" x2="8" y2="6"></line>
                    <line x1="3" y1="10" x2="21" y2="10"></line>
                </svg>
                This week
            </button>
        </div>
    </div>

    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/">首页</a></li>
            <li class="breadcrumb-item active" aria-current="page">Library</li>
        </ol>
    </nav>

    <table class="table table-hover">
        <thead>
        <tr>
            <th>序号</th>
            <th>台网代码</th>
            <th>台网名称(中文)</th>
            <th>台网名称(英文)</th>
            <th>包含台站数</th>
            <th>台网状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        {% for network in network_list %}
            <tr>
                <th scope="row">{{ forloop.counter }}</th>
                <td>
                    <a href="{{ network.get_absolute_url }}">{{ network.code }}</a>
                </td>
                <td>{{ network.name_zh }}</td>
                <td>{{ network.name_en }}</td>
                <td>{{ network.station_set.count }}</td>
                <td>{{ network.get_status_display }}</td>
                <td>
                    <a class="btn btn-success" href="{% url 'seisnet:edit' network.code %}">编辑</a>
                    <button id="{{ network.code }}" class="btn btn-danger btn-delete">删除</button>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    <script src="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/js/gijgo.min.js" type="text/javascript"></script>
    <link href="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/css/gijgo.min.css" rel="stylesheet" type="text/css"/>
    <div id="dialog" width="350">
        <input type="hidden" id="network-code"/>
        <div data-role="body">

        </div>
        <div data-role="footer">
            <button class="btn" data-role="close">取消</button>
            <button id='sure' class="btn" type='submit'>确定</button>
        </div>
    </div>
    <script type="text/javascript">
        var dialog;
        $(document).ready(function () {
            dialog = $("#dialog").dialog({
                uiLibrary: 'bootstrap',
                autoOpen: false,
                resizable: true,
                minWidth: 200,
                maxWidth: 600,
                minHeight: 200,
                maxHeight: 450,
                height: 200,
                modal: true
            });
            // 删除按钮绑定click事件
            $('.btn-delete').click(
                function () {
                    dialog.open('删除确认对话框');
                    dialog.content('确定要删除台网:' + this.id);
                    $('#network-code').val(this.id);
                }
            );
            // 删除确认按钮绑定click事件
            $('#sure').click(
                function () {
                    var network_code = $('#network-code').val();
                    $.ajax({
                        url: "{% url 'seisnet:delete' %}",
                        type: "POST",
                        data: {
                            'code': network_code,
                        },
                        success: function () {
                            var del_tr = $('#' + network_code).parent().parent();
                            del_tr.remove();
                            dialog.close();
                        },
                    });
                }
            )
        });

        // using jQuery
        function getCookie(name) {
            var cookieValue = null;
            if (document.cookie && document.cookie !== '') {
                var cookies = document.cookie.split(';');
                for (var i = 0; i < cookies.length; i++) {
                    var cookie = jQuery.trim(cookies[i]);
                    // Does this cookie string begin with the name we want?
                    if (cookie.substring(0, name.length + 1) === (name + '=')) {
                        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                        break;
                    }
                }
            }
            return cookieValue;
        }

        var csrftoken = getCookie('csrftoken');

        function csrfSafeMethod(method) {
            // 这些HTTP方法不要求CSRF包含
            return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
        }

        $.ajaxSetup({
            beforeSend: function (xhr, settings) {
                if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
                }
            }
        });

    </script>

{% endblock %}
